<template>
  <div class="container">
    <!-- 轮播图组件：el-carousel -->
    <el-carousel :interval="5000" arrow="always">
      <!-- el carousel-item是幻灯片的每一项 -->
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <!-- 图片实际是一个div的背景图 -->
        <div
          class="banner-image"
          :style="`
               background:url(${ $axios.defaults.baseURL + item.url}) center center no-repeat;
                background-size:contain contain;
                `"
        ></div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banners: [
        // "http://157.122.54.189:9095/assets/images/th01.jfif",
        // "http://157.122.54.189:9095/assets/images/th02.jfif",
        // "http://157.122.54.189:9095/assets/images/th03.jfif"
      ]
    };
  },
  mounted() {
    // 请求轮播图数据
    // this.$axios 通用的，大家习惯在vue中这样使用
    // Vue.prototype.$axios = axios; 自己可以这样绑定，这里nuxt.js已经帮我绑定了
    this.$axios({
      url:  "/scenics/banners"
    }).then(res => {
      // 获取轮播图数组
      const data = res.data.data;
      // 赋值给banners
      this.banners = data;
    });
    console.dir(this.$axios);
  }
};
</script>

<style lang="less" scoped>
.container {
  min-width: 1000px;
  margin: 0 auto;
  position: relative;

  // scoped下要修改第三方组件，需要加入深度选择器 /deep/
  /deep/ .el-carousel__container {
    height: 700px;
  }

  .banner-image {
    width: 100%;
    height: 100%;
  }
}
</style>